<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">		
	</head>
	<body>
		<h1>摄像头</h1>
		<video id="video" autoplay="true" style="width:100;height:320px;"></video>
		<div>
			<button id="capture">拍照</button>
		</div>
		<canvas id="canvas" width="100"></canvas>
	</body>
	<script>
		function getUserMedia(constraints,success,error){
			if(navigator.mediaDevices.getUserMedia){
				navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error)
			}else if(navigator.webkitGetUserMedia){
				navigator.webkitGetUserMedia(constraints,success,error)
			}else if(navigator.mozGetUserMedia){
				navigator.mozGetUserMedia(constraints,success,error)
			}else if(navigator.getUserMedia){
				navigator.getUserMedia(constraints,success,error)
			}
		}
		var video = document.getElementById("video");
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		
		function success(stream){
			var compatibleURL = window.URL||window.webkitURL;
			video.src = compatibleURL.createObjectURL(stream)
			video.play()
		}
		
		function error(error){
			alert(error.name,error.message)
			console.log('访问用户媒体设备失败',error.name,error.message)
		}
		
		if(navigator.mediaDevices.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.getUserMedia){
			getUserMedia({video:{width:100,height:320}},success,error)
		}else{
			alert("no support")
		}
		
		document.getElementById("capture").addEventListener('click',function(){
			context.drawImage(video,0,0,100,320)
		})
		
		
	</script>
</html>
